 <!-- /*
 * @Author: Zhang.Wei 
 * @Date: 2017-07-25 09:32:27 
 * @Last Modified by:   Zhang.Wei 
 * @Last Modified time: 2017-07-25 09:32:27 
 */  -->

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
 <title>作品页</title>    
 <script src="./js/jq.min.js"></script>
 <script src="./js/worker/jquery.touchSwipe.min.js"></script>
 <script src="./js/worker/hammer.min.js"></script>
 <script src="./js/worker/jquery.form.js"></script>
 <script src="./js/flexible.debug.js"></script>
 <link href="./css/index.css" rel="stylesheet">
 <link href="./css/worker.css" rel="stylesheet"> 
 <link rel="stylesheet" type="text/css" href="./css/bg.css">
 <link rel="icon" href="./img/vtmerLogin.ico" type="image/x-icon"/>  
 
 </head>
 
 <body>
     <!--LOGO和HOME  -->
     <img class="LOGO" src="./img/LOGO.png" alt="vtmer">
     <a href="./index.html" class="BTN-HOME"><img src="./img/BTN-HOME.png" alt="hmoe"/></a>
 
     <div id="container" >
         <div id="main" >
         </div>
         <div id="itro">(上下滑动可查看)</div>
     </div>
     <div id="right">
         <div id="text0" class="text" style="top:0%;left:10%;z-index:1">
            <div class="textTop"><p class="titleStyle"><p><hr style="color:rgb(55,142,255);" />
            <p class="introStyle"></p>
            </div>
            <div class="textUnder">
            <div id="jishu">技术领域 : </div>
            <div class="contentStyle"></div>
            </div>
         </div>
     </div>

     <a href="./touch.html" id="linkBtn" class="button">
         <div>联系我们</div>
     </a>
     
     <div class="BgContain">
         <ul class="scene" id="S1" data-scalar-x="38" data-scalar-y="38">
             <li class="layer" data-depth="0.60" id='bg1'><img src="img/bg1.png"></li>
         </ul>
         <ul class="scene" id="S2" data-scalar-x="38" data-scalar-y="38">
             <li class="layer" data-depth="0.60" id='bg2'><img src="img/bg7.png"></li>
         </ul>
         <ul class="scene" id="S3" data-scalar-x="38" data-scalar-y="38">
             <li class="layer" data-depth="0.40" id='bg3'><img src="img/bg3.png"></li>
         </ul>
         <ul class="scene" id="S4" data-scalar-x="38" data-scalar-y="38">
             <li class="layer" data-depth="0.60" id='bg4'><img src="img/bg6.png"></li>
         </ul>
         <ul class="scene" id="S5" data-scalar-x="38" data-scalar-y="38">
             <li class="layer" data-depth="0.80" id='bg5'><img src="img/bg4.png"></li>
         </ul>
         <ul class="scene" id="S6" data-scalar-x="38" data-scalar-y="38">
             <li class="layer" data-depth="1.00" id='bg6'><img src="img/bg9.png"></li>
         </ul>
         <ul class="scene" id="S7" data-scalar-x="28" data-scalar-y="28">
              <li class="layer" data-depth="1.00" id='bg7'><img src="img/bg11.png"></li>
         </ul>
         <ul class="scene" id="S8" data-scalar-x="28" data-scalar-y="28">
             <li class="layer" data-depth="0.60" id='bg4'><img src="img/bg10.png"></li>
         </ul>
         <ul class="scene" id="S9" data-scalar-x="28" data-scalar-y="28">
             <li class="layer" data-depth="0.80" id='bg5'><img src="img/bg8.png"></li>
         </ul>
         <ul class="scene" id="S10" data-scalar-x="28" data-scalar-y="28">
             <li class="layer" data-depth="1.00" id='bg6'><img src="img/bg2.png"></li>
         </ul>
         <ul class="scene" id="S11" data-scalar-x="28" data-scalar-y="28">
             <li class="layer" data-depth="1.00" id='bg6'><img src="img/bg12.png"></li>
         </ul>
         <ul class="scene" id="S12" data-scalar-x="28" data-scalar-y="28">
             <li class="layer" data-depth="1.00" id='bg6'><img src="img/bg5.png"></li>
         </ul>
     </div> 
 
     <script src='./js/jquery.parallax.min.js'></script>
     <script src="./js/worker/worker.js"></script>
     <script type="text/javascript">
       $('.scene').parallax(); 
         /** * 禁止浏览器下拉回弹 */
         (function stopDrop() {
             var lastY;
             //最后一次y坐标点 
             $(document.body).on('touchstart', function (event) {
                 lastY = event.originalEvent.changedTouches[0].clientY;
                 //点击屏幕时记录最后一次Y度坐标。 
             });
             $(document.body).on('touchmove', function (event) {
                 var y = event.originalEvent.changedTouches[0].clientY;
                 var st = $(this).scrollTop();
                 //滚动条高度 
                 if (y >= lastY && st <= 10) {
                     //如果滚动条高度小于0，可以理解为到顶了，且是下拉情况下，阻止touchmove事件。 
                     lastY = y; event.preventDefault();
                 } lastY = y;
             });
             $('.scene').parallax(); 
         })()
     </script>
 
 </body>
 </html>
 